@import '../../styles/index';
@prefixCls: ~'@{css-prefix}-button';

.@{prefixCls} {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: @button-padding;
  vertical-align: middle;
  text-align: center;
  font-size: @font-size;
  color: @color;
  border-radius: @border-radius;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  outline: none;
  background: @button-bg;
  text-shadow: @text-shadow;

  &:hover {
    cursor: pointer;
  }

  .icon {
    order: 1;
  }

  .content {
    order: 2;
  }
  // type =>
  // .button-type();
  &-size {
    &-default {
      height: @button-height;
      padding: @button-padding;
    }

    &-small {
      height: @button-height-small;
      padding: @button-padding-small;
    }

    &-large {
      height: @button-height-large;
      padding: @button-padding-large;
    }
  }

  &-default {
    border-color: @border-color;
    color: @color-inverted;
  }

  &-primary {
    background-color: @color-primary;
  }

  &-warning {
    background-color: @color-warning;
  }

  &-error {
    background-color: @color-error;
  }

  &-info {
    background-color: @color-info;
  }

  &-success {
    background-color: @color-success;
  }

  &-dashed {
    color: @color-inverted;
    border: 1px dashed @border-color;
  }

  &-disabled {
    background-color: @color-disabled;
    color: rgba(255, 255, 255, 0.8);

    &:hover {
      cursor: not-allowed;
    }
  }

  &-round {
    border-radius: @border-radius-round;
  }

  // icon
  .loading {
    animation: g-spin 1s infinite linear;
  }

  &.icon-right {
    & > .icon {
      order: 2;
      margin-right: 0;
    }

    & > .content {
      order: 1;
      margin-right: 0.3em;
    }
  }
}
